<script>
export default {
  props: ['tableList', 'fetchTableData'],
  watch: {
    tableList(n) {
      if (n) {
        this.parentTable = n
      }
    }
  },
  data() {
    return {
      param: {
        content: {
          keyword: null
        }
      },
      parentTable: {
        item: null,
        hidden: false
      },
      detailOrAdd: {
        template: {
          nameInfo: {shortName: {'zh-CN': ''},fullName: {'zh-CN': ''}},
          satelliteLocation: {lng: '',lat: '',area: '', zoom: 18},
          dataType: 'CUMULATE'
        },
        data: {
          nameInfo: {shortName: {'zh-CN': ''},fullName: {'zh-CN': ''}},
          satelliteLocation: {lng: '',lat: '',area: '', zoom: 18},
          dataType: 'CUMULATE'
        }
      },
      meterList: {
        meterMap: {

        },
        data: []
      },
      gatewayList: {

      },
      dataTypeList: {
        data: [
          {code: 'CUMULATE', name: '累积'},
          {code: 'PROCESS', name: '过程'}
        ]
      },
      virtualList: {
        data: [
          {code: 'Y', name: '虚拟点'},
          {code: 'N', name: '真实点'}
        ]
      },
      stateList: {
        data: [
          {code: 'CONFIRM', name: '待确认'},
          {code: 'READY', name: '正常'},
          {code: 'REFUSE', name: '拒绝处理数据'}
        ]
      }
    }
  },
  mounted() {
    this.fetchBaseData(() => {
      this.parentTable = this.tableList
      if (this.parentTable.item) {
        this.detailOrAdd.data = this.parentTable.item
      }else {
        this.detailOrAdd.data = this.detailOrAdd.template
      }
    })
  },
  methods: {
    formCancel: function () {
      this.parentTable.hidden = false
      this.fetchTableData()
    },
    fetchBaseData: function (fuc) {
      this.$axios({url:'/ems/client/base/gateway/list',data: this.param}).then((gatewayContent) => {
        this.gatewayList.data = gatewayContent.list
        this.$axios({url:'/ems/client/base/meter/list',data: this.param}).then((meterContent) => {
          this.meterList.data = meterContent.list
          fuc()
        })
      })
    },
    formSubmit: function () {
      this.$refs.form.validate((valid) => {
        if(valid) {
          this.saveOrUpdate(this.detailOrAdd.data)
        }else {
          return false
        }
      })
    },
    saveOrUpdate: function (data) {
      const param = {}
      for (let k in data) {
        const v = data[k]
        if (v instanceof Object) {
          param[k] = JSON.stringify(v)
        }else {
          param[k] = v
        }
      }
      this.$axios({url:'/ems/client/base/point/update',data: {content: param}}).then((content) => {
        if (content) {
          this.$message("保存成功")
          this.formCancel()
        }
      });
    },
    findById: function (id, list) {
      for (let i = 0; i < list.length; i ++) {
        const item = list[i];
        if (item.id === id) {
          return item;
        }
      }
      return  null;
    }
  }
}
</script>

<template>
  <el-form ref="form" :model="detailOrAdd.data" label-width="150px">
    <el-row  style="margin-top: 20px;">
      <el-col :span="8">
        <el-form-item label="ID" label-width="200px">
          <el-input v-model="detailOrAdd.data.id" style="width: 250px;" disabled></el-input>
        </el-form-item>
        <el-form-item prop="gatewayId" label="关联采集器" label-width="200px" :rules="[{ required: true, message: '不能为空'}]">
          <el-select filterable v-model="detailOrAdd.data.gatewayId" placeholder="请选择采集器">
            <el-option v-for="item in gatewayList.data" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="meterId" label="关联仪表" label-width="200px" :rules="[{ required: true, message: '不能为空'}]">
          <el-select filterable v-model="detailOrAdd.data.meterId" placeholder="请选择仪表">
            <el-option v-for="item in meterList.data" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集点名称" prop="name" label-width="200px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.name" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="采集点编码" prop="code" label-width="200px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.code" style="width: 250px;"></el-input>
        </el-form-item>

      </el-col>
      <el-col :span="8">
        <el-form-item label="用户编码（关联采集点）" prop="userCode" label-width="200px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.userCode" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="最大安全值" label-width="150px">
          <el-input v-model="detailOrAdd.data.maxSafeValue" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="最小安全值" label-width="150px">
          <el-input v-model="detailOrAdd.data.minSafeValue" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="dataType" label="值类型" :rules="[{ required: true, message: '不能为空'}]">
          <el-select v-model="detailOrAdd.data.dataType" placeholder="请选择值类型">
            <el-option v-for="item in dataTypeList.data" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集点显示最大值" label-width="150px">
          <el-input v-model="detailOrAdd.data.maxValue" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="真实值计算脚本" label-width="150px">
          <el-input v-model="detailOrAdd.data.computeScript" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="virtual" label="采集点类型" :rules="[{ required: true, message: '不能为空'}]">
          <el-select v-model="detailOrAdd.data.virtual" placeholder="请选择采集点类型">
            <el-option v-for="item in virtualList.data" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="state" label="采集器状态" :rules="[{ required: true, message: '不能为空'}]">
          <el-select v-model="detailOrAdd.data.state" placeholder="请选择采集器状态">
            <el-option v-for="item in stateList.data" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="扩展信息（报表可用）" label-width="150px">
          <el-input v-model="detailOrAdd.data.ext" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" @click="formSubmit">提交</el-button>
      <el-button @click="formCancel">取消</el-button>
    </el-row>
  </el-form>
</template>

<style>

</style>
